<template>
  <div class="first">
    <div class="flex align-center justify-center">
      <div class="item-title flex align-center justify-center">企业展示</div>
    </div>
    <div class="px-2">
      <div class="text-main font18 mt-2 mb-1 text-left">销售数据</div>
      <div class="flex align-center justify-between mb-2">
        <div class="item" v-if="dataOneInfo.gjLwDpPublics[0]">
          <div class="item-box mb-2 pointer" @click="enterCompanyList">
            <div class="text-main">销售量</div>
            <div class="num">
              <!-- {{ dataOneInfo.xsNumber }} -->2886.90
              <span>万吨 </span>
            </div>
          </div>
          <div
            class="flex align-center justify-between probox"
            style="color: #fba731"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第一销售</div>
              <div
                class="pt-1 font12"
                style="color: #fba731; border-top: 1px solid #fba731"
              >
                {{ dataOneInfo.gjLwDpPublics[0].name }}
                {{ dataOneInfo.gjLwDpPublics[0].value }}万吨
              </div>
            </div>
            <Progress
            :radius="getRealPX(38)"
              strokeColor="#FBA731" 
              :strokeWidth="getRealPX(4)"
              :value="dataOneInfo.gjLwDpPublics[0].percentage"
            ></Progress>
          </div>
        </div>
        <div class="item" v-if="dataOneInfo.gjLwDpPublics[1]">
          <div class="item-box mb-2 pointer" @click="enterCompanyList">
            <div class="text-main">销售额</div>
            <div class="num">
              {{ dataOneInfo.xsPrice }}
              <span> 万元 </span>
            </div>
          </div>
          <div
            class="flex align-center justify-between probox"
            style="color: #f66881"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第二销售</div>
              <div
                class="pt-1 font12"
                style="color: #f66881; border-top: 1px solid #f66881"
              >
                {{ dataOneInfo.gjLwDpPublics[1].name }}
                {{ dataOneInfo.gjLwDpPublics[1].value }}万吨
              </div>
            </div>
            <Progress
             :radius="getRealPX(38)"
              strokeColor="#F66881"
              :strokeWidth="getRealPX(4)"
              :value="dataOneInfo.gjLwDpPublics[1].percentage"
            ></Progress>
          </div>
        </div>
        <div class="item" v-if="dataOneInfo.gjLwDpPublics[2]">
          <div class="item-box mb-2  pointer" @click="enterCompanyList">
            <div class="text-main">纳税</div>
            <div class="num">
              {{ dataOneInfo.nsPrice }}
              <span> 万元 </span>
            </div>
          </div>
          <div
            class="flex align-center justify-between probox"
            style="color: #6265ff"
          >
            <div class="text-left">
              <div class="colorfff font12 mb-1">第三销售</div>
              <div
                class="pt-1 font12"
                style="color: #6265ff; border-top: 1px solid #6265ff"
              >
                {{ dataOneInfo.gjLwDpPublics[2].name }}
                {{ dataOneInfo.gjLwDpPublics[2].value }}万吨
              </div>
            </div>
            <Progress
             :radius="getRealPX(38)"
              strokeColor="#6265FF"
              :strokeWidth="getRealPX(4)"
              :value="dataOneInfo.gjLwDpPublics[2].percentage"
            ></Progress>
          </div>
        </div>
      </div>
      <div id="sale-chart01"></div>
      <div class="mt-2">
        <ElTab
          :tableheight="tableheight"
          :headerData="headerData"
          :bodyData="dataOneList"
          :clickItem="clickItem"
        ></ElTab>
      </div>
    </div>
  </div>
</template>
<script>
import Progress from "easy-circular-progress";
import ElTab from "@/components/el_table";
var echarts = require("echarts");
import saleApi from "@/api/sale/index";

export default {
  name: "saleFirst",
  components: { Progress, ElTab },
  data() {
    return {
      dataOneInfo: {},
      dataOneList: [],
      tableheight: 420,
      listName:[],
      headerData: [
        { title: "序号", width: 50, props: "id" },
        { title: "企业名称", width: "", props: "vcCompanyName" },
        { title: "企业类型", width: 96, props: "vcCompanyType" },
        { title: "销售额（万元）", width: 96, props: "intDecNumPrice" },
        { title: "运输量（吨）", width: 110, props: "gjHwYsl" },
        { title: "纳税（万元）", width: 96, props: "nsPrice" },
      ],
    };
  },
  mounted() {
    this.dataOne();
  },
  methods: {
    clickItem(item, index) {
      this.$router.push({ path: "/company",query:{longCompanyId:item.vcCompanyName} });
    },
    draw() {
      let that=this;
      var drawCharts = document.getElementById("sale-chart01"); // 对应地使用ByClassName
      var drawChart = echarts.init(drawCharts);
      let datax = [],
        datay = [];
      that.dataOneInfo.gjHwTjPicture.map((item) => {
        datax.push(item.name);
        datay.push(item.value);
      });
      var option = {
        // title: {
        //   text: "政策补贴额度",
        //   x: "center",
        //   y: "4%",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: "22",
        //   },
        //   subtextStyle: {
        //     color: "#90979c",
        //     fontSize: "16",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "8%",
          right: "3%",
          left: "15%",
          bottom: "25%",
        },
        xAxis: [
          {
            type: "category",
            data: datax,
            axisLine: {
              lineStyle: {
                color: "rgba(101, 198, 231, 0.2)",
              },
            },

            axisLabel: {
              margin: 10,
              color: "#65ABE7",
              textStyle: {
                fontSize: that.getRealPX(12),
              },
              interval: 0,
              rotate: 40,
            },
          },
        ],
        yAxis: [
          {
            // name: "单位：万元",
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#65C6E7",
              },
            },
            axisLabel: {
              textStyle: {
                fontSize: that.getRealPX(12),
                color: "#65ABE7",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(101, 198, 231, 0.2)",
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var str = "";
            str +=
              params[0].name +":"+
              params[0].value +
              "万吨";
             
            return str;
          },
        },
        series: [
          {
            type: "bar",
            data: datay,
            barWidth: "15%",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
          },
        ],
      };
      drawChart.setOption(option);
      drawChart.getZr().on("click", function (params) {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (drawChart.containPixel("grid", pointInPixel)) {
          let xIndex = drawChart.convertFromPixel({ seriesIndex: 0 }, [
            params.offsetX,
            params.offsetY,
          ])[0];
          console.log(xIndex);
          console.log(datax);
          that.dataTwo(datax[xIndex]);
        }
      });
    },
    dataOne() {
      let that = this;
      saleApi
        .dataOne({})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataOneInfo = res;
            that.$nextTick(() => {
              that.draw();
            });
            that.dataTwo(res.gjHwTjPicture[0].name);
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    dataTwo(name) {
      let that = this;
      saleApi
        .dataTwo({ vcHwName: name,pageIndex:1,pageSize:10 })
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataOneList = res.records;
            
            that.$emit('changeCompany',that.dataOneList)
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    enterCompanyList(){
       this.$router.push({ path: "/companyList",query:{title:'总销售量'} });
    }
  },
};
</script>
<style lang="stylus" scoped>
.text-main {
  color: #66D6FF;
  font-weight: 400;
}

#sale-chart01 {
  width: 100%;
  height: 200px;
}

.first {
  width: 613px;
  height: 975px;
  background: url('../../../assets/img/sale/bg02.png') no-repeat;
  background-size: 613px 975px;

  .probox {
    // height 80px
  }

  .item-title {
    width: 264px;
    height: 40px;
    background: url('../../../assets/img/item-title.png');
    background-size: 264px 40px;
    margin-top: 6px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #DEF1FF;
  }

  .item {
    // width: 146px;
    .item-box {
      width: 146px;
      height: 76px;
      background: url('../../../assets/img/sale/iconbg01.png');
      background-size: 146px 76px;
      overflow: hidden;

      .text-main {
        font-size: 16px;
        font-weight: 400;
        margin-top: 6px;
      }

      .num {
        font-size: 19px;
        font-weight: 400;
        color: #00F1FF;
        margin-top: 12px;

        span {
          font-size: 14px;
        }
      }
    }
  }
}
/deep/.vue-circular-progress .percent__int{
  font-size:20px ;
}
/deep/.vue-circular-progress .dot{
  font-size:10px ;
}
/deep/.vue-circular-progress .percent__dec {
  font-size:10px ;
}
/deep/.vue-circular-progress .percent_sign {
  font-size:10px ;
}
</style>
